<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Student List</title>
    <style type="text/css">
        table .odd {
            background-color: lightgrey;
        }
    </style>

</head>
<body>
<h2>Students List</h2>
<a href="form" th:href="@{/student/form}">Add a student</a>
<button  onclick="deleteInBatchs()">批量删除</button>

<table id="table-students" border="1" width="100%">
    <tr>
        <th>#</th>
        <th>No.</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Gender</th>
        <th>Operate</th>
    </tr>
    <tr th:each="s,iterStat: ${students}" th:class="${iterStat.odd}?'odd'">
        <td><input type="checkbox" th:value="${s.id}" name="delCheckbox"></td>
        <td th:text=${iterStat.count}>iterStat.count</td>
        <td th:text=${s.no}>number</td>
        <td th:text=${s.firstname}>firstname</td>
        <td th:text=${s.lastname}>lastname</td>
        <td th:text=${s.gender}>gender</td>
        <td>
            <a th:href="@{/student/view(id=${s.id})}">查看</a>
            <a th:href="@{/student/form(id=${s.id})}">编辑</a>
            <a th:href="@{/student/delete(id=${s.id})}">删除</a>
        </td>


    </tr>
</table>
</body>
<script src="../js/axios-0.18.0.js"></script>
<script>

    function deleteInBatchs(){
        let ids=[]
        let boxs=document.getElementsByName("delCheckbox")
        for(let i=0;i<boxs.length;i++)
        {
            if(boxs[i].checked)
                ids.push(boxs[i].value)
        }
        if(ids.length==0)
        {
            alert("您还未选择学生")
            return;
        }
        console.log(ids)
        let idsStr=ids.join(",")
        axios.delete("http://localhost:8080/student/deleteByIds/"+idsStr).then(function (resp){
            console.log(resp)
            if(resp.data.code!=1)
            {
                alert(resp.data.msg)
                return;
            }
            alert(resp.data.msg)
            window.location.href='/student'
        }).catch(function (err){
            console.log(err)
           alert(err.message)
        })


    }
</script>
</html>